<script setup lang="ts">

import router from "@/router";
import {ArrowRight} from "@element-plus/icons-vue";
import {ref} from "vue";
import {getInfo, reviseInfo} from "@/api/home/login/login";
import {ElMessage} from "element-plus";

let url = 'http://192.168.5.120:8090'
let actions = {
    man: '男',
    manImg: '../../src/assets/images/男.png',
    woman: '女',
    womanImg: '../../src/assets/images/女.png',
}
let user = ref({})
let birthDate
let birthdays = ref('')//默认生日
getInfo().then(res=>{
    if (res.code == 401) {
        ElMessage.error('登录认证过期，请重新登录！')
        router.push({path: `/login`})
    }
    if (res.code == 200) {
        user.value = JSON.parse(localStorage.getItem('userInformation'))
        birthDate = new Date(user.value.birthday)
        birthdays = ref(user.value.birthday)//默认生日
    }
})

let gender = actions.man
const errorHandler = () => true

// 打开遮罩
let visible = ref(false)

function showDrawer() {
    visible.value = true;
}

// 关闭遮罩
function onClose() {
    visible.value = false;
}

function isMan() {
    gender = actions.man
    user.value.gender = gender
    visible.value = false;
    revise()
}

function isWoman() {
    gender = actions.woman
    user.value.gender = gender
    visible.value = false;
    revise()
}

function revise () {
    reviseInfo(user.value).then(res=>{
        if (res.code == 200) {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            router.go(0)
        }
    })
    getInfo().then(info=>{
        console.log(info)
        if (info.code == 200) {
            console.log('123')
            localStorage.setItem('userInformation',JSON.stringify(user.value))
        }
    })
}

// 时间选择器
let date;//默认选择的日期
const minDate = new Date(2000, 0, 1);
const maxDate = new Date(2029, 0, 1);
const time = ref(false);
//修改生日
const selecttime = (item) => {
    birthdays.value = item.selectedValues.join('-')
    time.value = false
    user.value.birthday = birthdays.value
    revise()
}
const closetime = () => {
    time.value = false
}
</script>

<template>
  <!--  设置头像、名字、性别年龄-->
    <div class="box">
        <div class="titTime" @click="router.go(-1)">
            <van-icon name="arrow-left"/>
            <span class="titleText">编辑资料</span>
        </div>
        <div class="substance">
            <div class="avatar substanceBox">
                <div class="avatarText">
                    头像
                </div>
                <div class="imgBox" @click="router.push('/avatarSwitch')">
                    <el-avatar :size="55" @error="errorHandler">
                        <img
                            :src="url + user.avatar" alt="" class="imgT"
                        />
                    </el-avatar>
                </div>
            </div>
            <div class="name substanceBox">
                <div class="text">
                    昵称
                </div>
                <div class="nameBox" @click="router.push('/revise')">
                    {{user.nickname}}
                    <el-icon class="iconImg">
                        <ArrowRight/>
                    </el-icon>
                </div>
            </div>
            <div class="gender substanceBox">
                <div class="text">
                    性别
                </div>
                <div class="genderBox" @click="showDrawer">
                    {{ user.gender }}
                    <el-icon class="iconImg">
                        <ArrowRight/>
                    </el-icon>
                </div>
            </div>
            <div class="birthday substanceBox">
                <div class="text">
                    生日
                </div>
                <div class="birthdayBox">
                    <van-cell is-link :value=birthdays @click="time = true"/>
                    <van-action-sheet v-model:show="time">
                        <van-date-picker
                                v-model="date"
                                title="生日"
                                :min-date="minDate"
                                :max-date="maxDate"
                                @confirm="selecttime"
                                @cancel="closetime"
                        />
                    </van-action-sheet>
                </div>
            </div>
            <div class="classAndgrade substanceBox">
                <div class="text">
                    班级
                </div>
                <div class="classAndgradeBox">
                    {{user.college}}
                </div>
            </div>
            <div class="schoolDegree substanceBox">
                <div class="text">
                    学号
                </div>
                <div class="schoolDegreeBox">
                    {{user.classId}}
                </div>
            </div>
            <div class="degree substanceBox">
                <div class="text">
                    学历
                </div>
                <div class="degreeBox">
                    {{user.education}}
                </div>
            </div>
            <div class="matriculationTime substanceBox">
                <div class="text">
                    入学时间
                </div>
                <div class="matriculationTimeBox">
                    {{user.updateTime != 0 ? user.updateTime.substring(0, 10) : ''}}
                </div>
            </div>
        </div>
        <a-drawer
                placement="bottom"
                :closable="false"
                :height="0+'%'"
                :width="50+'%'"
                :visible="visible"
                @close="onClose"
                :maskStyle="{
                 'animation':'none',
                 'height': '100%',
                 }"
        >
            <el-button class="isMan" @click="isMan">男</el-button>
            <el-button class="isWoman" @click="isWoman">女</el-button>
            <button class="cancel" @click="onClose">取消</button>
        </a-drawer>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.iconImg {
    margin-top: 2%;
    vertical-align: top
}

.box {
    padding: 10% 8%;
    background-color: #e5e1e1;

    .titTime {
        margin-bottom: 5%;
        font-size: 5vw;
    }

    .substance {
        padding: 6%;
        background-color: #fff;
        border-radius: 15px;

        .substanceBox {
            padding: 8% 0;
            display: flex;
            justify-content: space-between;
            min-height: 15vw;
            border-bottom: 1px solid rgba(42, 43, 65, 0.1);

            .avatarText {
                line-height: 15vw;
            }

            .imgBox {
                .imgT {
                    vertical-align: top;
                }
            }
        }
    }
}

.cancel {
    position: absolute;
    bottom: 15vw;
    left: 6vw;
    width: 88%;
    height: 13vw;
    font-size: 4vw;
    background-color: #fff;
    border: none;
    border-radius: 10px;
}

.isMan {
    position: absolute;
    bottom: 45vw;
    left: 6vw;
    width: 88%;
    height: 13vw;
    font-size: 4vw;
    background-color: #fff;
    border: none;
    border-radius: 10px;
}

.isWoman {
    position: absolute;
    bottom: 30vw;
    left: 3vw;
    width: 88%;
    height: 13vw;
    font-size: 4vw;
    background-color: #fff;
    border: none;
    border-radius: 10px;
}

.example-basic .el-date-editor {
    margin: 8px;
}
>>> .van-cell {
    padding: 0;
}
>>> .van-cell__value {
    color: black;
    font-size: 4vw;
}
</style>